<script setup>
import User from "@/components/user/user.vue";

const BASE_URL_IMG = import.meta.env.VITE_APP_IMG_API;
const BASE_BED_URL = import.meta.env.VITE_APP_BED_IMG_API;
const bannerList = ref([
  {title: "不愧是帝后，爱了爱了。😍", image: BASE_BED_URL + "/2023/12/29/gz0gb1.jpg"},
  {title: "弃天道，择霸道🥱", image: BASE_BED_URL + "/2023/12/25/p80hk6.jpg"},
  {title: "搞笑女+搞笑男😅", image: BASE_BED_URL + "/2023/12/25/p80rzv.jpg"},
  {title: "导致我每集片头都不跳过😋", image: BASE_BED_URL + "/2023/12/25/p80sgt.png"},
  {title: "好腿，只能说被打的真惨🤣", image: BASE_BED_URL + "/2023/12/25/p810n0.jpg"},
]);
</script>

<template>
  <div class="horse myBetween">
    <div class="horse-left">
      <el-carousel class="banner" :interval="5000" arrow="always">
        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
          <img class="banner-img" :src="item.image" :alt="item.title">
          <h3 class="title">{{ item.title }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="horse-right">
      <User></User>
      <el-card></el-card>
      <el-card class="soft box-shadow">
        <img :src="BASE_BED_URL + '/2023/12/25/plnssp.jpg'" alt="">
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="less">
.horse {
  width: 100%;
  height: 400px;

  .horse-left {
    width: 840px;
    height: 100%;

    .banner {
      position: relative;
      height: 400px;
      border-radius: 7px;

      /deep/ .el-carousel__container {
        height: 100%;
      }

      .title {
        position: absolute;
        width: 100%;
        height: 50px;
        line-height: 50px;
        background: rgba(0, 0, 0, .3);
        color: #fff;
        text-align: center;
        bottom: 50px;
        z-index: 1;
      }

      .banner-img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .horse-right {
    width: 350px;
    height: 100%;

    .soft {
      position: relative;
      top: 10px;
      width: 100%;
      height: 125px;

      img {
        width: 100%;
        height: 125px;
      }
    }
  }
}
</style>